<template>
  <div>
    <p>子组件绑定的值：{{ mVal }}</p>
    <p>子组件绑定的值：{{ mVal2 }}</p>

    <input
      type="text"
      :value="mVal"
      @input="(e) => emit('update:mVal', (e.target as HTMLInputElement).value)"
    />
    <input
      type="text"
      :value="mVal2"
      @input="(e) => emit('update:mVal2', (e.target as HTMLInputElement).value)"
    />
    <hr />

    <input type="text" name="" id="" v-model="userFrom.name" />
    <input type="text" name="" id="" v-model="userFrom.sex" />
    <input type="text" name="" id="" v-model="userFrom.age" />
  </div>
</template>

<script setup lang="ts">
import { reactive, watch } from 'vue'

const porps = defineProps(['mVal', 'mVal2', 'userInfo'])

const emit = defineEmits(['update:mVal', 'update:mVal2', 'update:userInfo'])

const userFrom = reactive(porps.userInfo)

watch(userFrom, () => {
  console.log(userFrom)

  emit('update:userInfo', userFrom)
})
</script>

<style></style>
